<template>
    <div class="simpleTalk-page" v-if="SimpleTalk">
        <div class="header">
            <div class="backIcon" @click="$router.go(-1)">
                <img src="../assets/images/back_b_icon.png" alt="">
            </div>
            <div class="title">食话详情</div>
            <div class="right">
                <img class="dots" src="../assets/images/black_more.png" alt="" />
            </div>
        </div>
        <div style="height:40px"></div>
        <div class="author">
            <router-link tag="div" :to="'/author?id='+SimpleTalk.user.id" class="left">
                <div class="img">
                    <img :src="'https://pic.ecook.cn/web/'+SimpleTalk.user.imageid+'.jpg!s1'" alt="" class="authorImg">
                    <img v-if="SimpleTalk.user.star == 5" src="../assets/images/v5.png" alt="" class="star">
                    <img v-if="SimpleTalk.user.star == 4" src="../assets/images/v4.png" alt="" class="star">
                    <img v-if="SimpleTalk.user.star == 3" src="../assets/images/v3.png" alt="" class="star">
                    <img v-if="SimpleTalk.user.star == 2" src="../assets/images/v2.png" alt="" class="star">
                    <img v-if="SimpleTalk.user.star == 1" src="../assets/images/v1.png" alt="" class="star">
                </div>
                <div class="nickname">
                    <div class="name">{{SimpleTalk.user.nickname}}</div>
                    <div class="time">{{SimpleTalk.displayTime}}</div>
                </div>
            </router-link>
            <div class="right">
                    <div class="gz" v-if="!SimpleTalk.info.isUserFollowed" @click="addfollow(SimpleTalk.user.id)">
                        <img src="../assets/images/加123.png" alt="">
                        关注
                    </div>
                    <div class="gz active" v-else @click="addfollow(SimpleTalk.user.id)">
                        已关注
                    </div>
                </div>
        </div>
        <div class="mainImg" v-if="SimpleTalk.attachment">
            <img 
             v-if="SimpleTalk.imageids!=null"
            :src="'https://pic.ecook.cn/web/'+SimpleTalk.imageids+'.jpg!wl280'" 
            v-lazy="'https://pic.ecook.cn/web/'+SimpleTalk.imageids+'.jpg!wl280'"
            @click="showOne" 
            alt="">
            <img
            v-else 
            :src="'https://pic.ecook.cn/web/'+SimpleTalk.attachment.imageid+'.jpg!wl280'" 
            v-lazy="'https://pic.ecook.cn/web/'+SimpleTalk.attachment.imageid+'.jpg!wl280'"
            @click="showOne" 
            alt="">
        </div>
        <div class="mainImgs" v-else>
            <img 
            v-for="(item,index) in Imagesidlist" 
            :key="index" 
            :src="'https://pic.ecook.cn/web/'+item+'.jpg!wl280'" 
            v-lazy="'https://pic.ecook.cn/web/'+item+'.jpg!wl280'"
            @click="showImgs(index)"
             alt="">
        </div>
        <div class="talkInfo" v-if="SimpleTalk.attachment" @click="godetail(SimpleTalk.attachment.url)">
            <div class="infoImg" :style="{'background-image': 'url(https://pic.ecook.cn/web/'+SimpleTalk.attachment.imageid+'.jpg!wl280)',}"></div>
            <div class="rightInfo">
                <div class="talkname one-txt-cut">{{SimpleTalk.attachment.title}}</div>
                <div class="talkdescrip line-ellipsis">{{SimpleTalk.attachment.description}}</div>
            </div>
        </div>
        <div class="text" v-else>
            <span>{{SimpleTalk.text}}</span>
        </div>
        <div :class="['likeCon',{'empty':SimpleTalk.info.likeUsers.length==0}]">
            <div class="likelist" v-if="SimpleTalk.info.likeUsers.length">
                <router-link tag="div" :to="'/author?id='+item.userid" class="imgItem" v-for="item in SimpleTalk.info.likeUsers" :key="item.userid">
                    <img :src="'https://pic.ecook.cn/web/'+item.userimageid+'.jpg!s1'" v-lazy="'https://pic.ecook.cn/web/'+item.userimageid+'.jpg!s1'" alt="">
                </router-link>
                
                <div class="likenum">等{{SimpleTalk.info.likeNum}}人点赞</div>
            </div>
        </div>
        <div class="commentCon" v-if="CommentList">
            <div class="commentItem" v-for="item in CommentList" :key="item.id">
                <div class="Comleft">
                    <img :src="'https://pic.ecook.cn/web/'+item.userimageid+'.jpg!s1'" alt="">
                    <img v-if="item.userstar == 5" src="../assets/images/v5.png" alt="" class="star">
                    <img v-if="item.userstar == 4" src="../assets/images/v4.png" alt="" class="star">
                    <img v-if="item.userstar == 3" src="../assets/images/v3.png" alt="" class="star">
                    <img v-if="item.userstar == 2" src="../assets/images/v2.png" alt="" class="star">
                    <img v-if="item.userstar == 1" src="../assets/images/v1.png" alt="" class="star">
                </div>
                <div class="Comright">
                    <div class="RightTop">
                        <div class="toptime" v-if="item.displaytime!=null">{{item.displaytime}}</div>
                        <div class="toptime" v-else>{{item.realtime | sendTime}}</div>
                        <div class="topname">{{item.username}}</div>
                    </div>
                    <div class="RightCenter">
                        <div class="content">{{item.text}}</div>
                    </div>
                    <div class="RightBottom">
                        <div class="btmleft">举报</div>
                        <div class="btmright">
                            <div class="replayIcon">
                                <img src="../assets/images/icon_new_comment.png" alt="">
                            </div>
                            <div class="likeIcon" @click="commentlike(item.id)">
                                <img v-if="!item.liked" src="../assets/images/xzx_zan.png" alt="">
                                <!-- <img v-if="item.liked" src="../assets/images/topbanner_white_zan_yes.png" alt=""> -->
                                <div v-if="item.liked" class="likeImg"></div>
                                <span>{{item.likeNum}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="commentEmpty" v-else>抢个沙发吧，期待他的回复</div>
        <div style="height:40px"></div>
        <div class="bottom">
            <div class="leftlike" @click="like">
                <img v-if="!SimpleTalk.info.isLiked" src="../assets/images/talk_detail_zan_def.png" alt="">
                <img v-else src="../assets/images/talk_detail_zan_slt.png" alt="">
                <span v-if="!SimpleTalk.info.isLiked">赞</span>
                <span v-else class="already">已点赞</span>
            </div>
            <div class="centerline"></div>
            <div class="rightCom" @click="showCom">
                <img src="../assets/images/icon_recipe_detail_comment.png" alt="">
                <span>评论</span>
            </div>
        </div>
        <van-image-preview v-model="showImg" :images="images" @change="onChange" :start-position="index" :swipe-duration="500" :loop="false">
            <template v-slot:index>{{ index+1 }}/{{images.length}}</template>
        </van-image-preview>
        <send-view v-if="showInp" @send="send" @close="close"></send-view>
    </div>
</template>

<script>
import {getTalkDetailsData,getTalkCommentListData} from "../api/userInfo"
import SendView from '../components/SendView.vue'
export default {
    data() {
        return {
            SimpleTalk:null,//详情
            Imagesidlist:[],//图片内容
            CommentList:null,//评论列表
            follows:[],//关注列表
            likedata:[],//点赞数据
            showImg: false,
            index: 0,
            images: [],
            showInp:false,
            comments:[]
        };
    },
    methods: {
        //详情数据
        getTalkDetailsFun(id){
            getTalkDetailsData({id}).then(data=>{
                console.log(data);
                if (data.data) {
                    this.SimpleTalk = data.data
                    if (data.data.imageids) {
                        if (data.data.imageids.length>9) {
                            let imgsid = data.data.imageids.split(",")
                            this.Imagesidlist = [...this.Imagesidlist,...imgsid]
                            this.Imagesidlist.forEach(item=>{
                                this.images.push(
                                    'https://pic.ecook.cn/web/'+item+'.jpg!wl720'
                                )
                            })
                        }else{
                            this.Imagesidlist.push(data.data.imageids)
                            this.images.push(
                                'https://pic.ecook.cn/web/'+data.data.imageids+'.jpg!wl720'
                            )
                        }                       
                    }else{
                        this.images.push(
                            'https://pic.ecook.cn/web/'+data.data.attachment.imageid+'.jpg!wl720'
                        )
                    }
                    //重置关注
                    let tempfollows = JSON.parse(window.localStorage.getItem("follows"))
                    if (tempfollows) {
                        this.follows = tempfollows
                        let i = tempfollows.findIndex(item=>item.id==this.SimpleTalk.user.id)
                        if (i!=-1) {
                            this.SimpleTalk.info.isUserFollowed = true
                        }
                    }
                    //重置点赞
                    let templike = JSON.parse(window.localStorage.getItem("Simplelike"))
                    if (templike) {
                        this.likedata = templike
                        let k = templike.findIndex(item=>item.id==this.SimpleTalk.id)
                        if (k!=-1) {
                            let userId = window.localStorage.getItem("userId");
                            this.SimpleTalk.info.isLiked = true
                            this.SimpleTalk.info.likeNum = this.SimpleTalk.info.likeNum+1
                            this.SimpleTalk.info.likeUsers.push({
                                userid:userId,
                                userimageid:8877665544,
                            })
                        }
                    }
                }
            })
        },
        //评论列表
        getTalkCommentListFun(id){
            getTalkCommentListData({id}).then(data=>{
                console.log(data);
                if (data.list.length!=0) {
                    this.CommentList = data.list

                    //重置评论
                    let tempComment = JSON.parse(window.localStorage.getItem("SimpleComment"))
                    if (tempComment) {
                        this.comments = tempComment
                        tempComment.forEach(item=>{
                            if (item.talkid==this.$route.query.id) {
                                this.CommentList.unshift(item)
                            }
                        })
                    }
                    //重置评论点赞
                    let SimpleCommentlike = JSON.parse(window.localStorage.getItem("SimpleCommentlike"))
                    if (SimpleCommentlike) {
                        this.CommentList.forEach(item=>{
                            SimpleCommentlike.forEach(k=>{
                                if (item.id==k.id) {
                                    item.liked = true,
                                    item.likeNum = item.likeNum+1
                                }
                            })
                        })
                    }
                }else{
                    this.CommentList = []
                }
            })
        },
        //跳转详情
        godetail(url){
            let id = url.split("?")[1].split("=")[1]
            this.$router.push({ path: "/detail", query: { id } });
        },
        //关注作者
        addfollow(id){
            // console.log(id);
            let index = this.follows.findIndex(item=>item.id==id)
            this.SimpleTalk.info.isUserFollowed=!this.SimpleTalk.info.isUserFollowed
            if (this.SimpleTalk.info.isUserFollowed) {
                if (index==-1) {
                    this.follows.push({
                        id,
                        imageid:this.SimpleTalk.user.imageid,
                        profile:this.SimpleTalk.user.profile,
                        star:this.SimpleTalk.user.star,
                        name:this.SimpleTalk.user.nickname
                    })
                }
            }else{
                this.follows.splice(index,1)
            }
            window.localStorage.setItem("follows",JSON.stringify(this.follows))

        },
        //点赞
        like(){
            let userId = window.localStorage.getItem("userId");
            this.SimpleTalk.info.isLiked = !this.SimpleTalk.info.isLiked
            let index = this.likedata.findIndex(item=>item.id==this.SimpleTalk.user.id)
            if (this.SimpleTalk.info.isLiked) {
                if (index==-1) {
                    this.likedata.push({
                        id:this.SimpleTalk.id
                    })
                    this.SimpleTalk.info.likeNum = this.SimpleTalk.info.likeNum+1
                        this.SimpleTalk.info.likeUsers.push({
                            userid:userId,
                            userimageid:8877665544,
                    })
                }
            }else{
                let i = this.SimpleTalk.info.likeUsers.findIndex(item=>item.userid==userId)
                this.likedata.splice(index,1)
                if (i!=-1) {
                    this.SimpleTalk.info.likeNum = this.SimpleTalk.info.likeNum-1
                    this.SimpleTalk.info.likeUsers.splice(i,1)
                }

            }
            window.localStorage.setItem("Simplelike",JSON.stringify(this.likedata))
        },
        //图片预览
        onChange(index) {
            this.index = index;
        },
        showImgs(i){
            this.showImg = true
            this.index = i
        },
        showOne(){
            this.showImg = true
        },
        //评论
        send(value){
            if (value) {
                let userId = window.localStorage.getItem("userId");
                let comment = {
                    id:new Date().getTime(),
                    talkid:this.$route.query.id,
                    text:value,
                    displaytime:null,
                    realtime:new Date().getTime(),
                    username:'厨友'+userId,
                    userimageid:"8877665544",
                    userid:userId,
                    replyComment:null,
                    likeNum:0,
                    liked:false,
                    user:{
                        id:userId,
                        nickname:'厨友'+userId,
                        userimageid:"8877665544",
                        star:0,
                        profile:'这家伙很懒，什么都没有留下',

                    }
                }
                this.CommentList.unshift(comment)
                this.comments.push(comment)
                window.localStorage.setItem("SimpleComment",JSON.stringify(this.comments))
                this.showInp = false
            }
        },
        //关闭评论窗口
        close(value){
            this.showInp = value
        },
        showCom(){
            this.showInp = true
        },
        //评论点赞
        commentlike(id){
            let SimpleCommentlike = JSON.parse(window.localStorage.getItem("SimpleCommentlike"))
            SimpleCommentlike = SimpleCommentlike==null?[]:SimpleCommentlike
            let index = this.CommentList.findIndex(item=>item.id==id)
            let i = SimpleCommentlike.findIndex(item=>item.id==id)
            console.log(index);
            this.CommentList[index].liked=!this.CommentList[index].liked
            if (this.CommentList[index].liked) {
                this.CommentList[index].likeNum = this.CommentList[index].likeNum+1
                SimpleCommentlike.push({
                    id
                })
                
            }else{
                this.CommentList[index].likeNum = this.CommentList[index].likeNum-1
                SimpleCommentlike.splice(i,1)
            }
            window.localStorage.setItem("SimpleCommentlike",JSON.stringify(SimpleCommentlike))
        }
    },
    created() {
        this.getTalkDetailsFun(this.$route.query.id)
        this.getTalkCommentListFun(this.$route.query.id)
    },
    components:{
        SendView,
    },
    filters:{
        sendTime(value){
            let time = new Date()
            let times = time.getTime()
            let nowtime = times-value
            if (nowtime < 0) {

                return ''

            } else if ((nowtime / 1000 < 30)) {

                return '刚刚'

            } else if (nowtime / 1000 < 60) {

                return parseInt((nowtime / 1000)) + '秒前'

             } else if ((nowtime / 60000) < 60) {

                return parseInt((nowtime / 60000)) + '分钟前'

            } else if ((nowtime / 3600000) < 24) {

                return parseInt(nowtime / 3600000) + '小时前'

            } else if ((nowtime / 86400000) < 31) {

                return parseInt(nowtime / 86400000) + '天前'

            } else if ((nowtime / 2592000000) < 12) {

                return parseInt(nowtime / 2592000000) + '月前'

            } else {

                return parseInt(nowtime / 31536000000) + '年前'

            }
        }
    }
};
</script>

<style lang="less" scoped>
.simpleTalk-page{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    
    .header{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background-color: #fff;
        
        .backIcon{
            width: 100px;
            height: 100%;
            display: flex;
            align-items: center;
            
            &>img{
                width: 11px;
                height: 18px;
                display: block;
                margin-left: 15px;
            }
        }
        .title{
            flex: 1;
            font-weight: bold;
            text-align: center;
        }
        .right{
            width: 100px;
            height: 100%;
            text-align: right;
            line-height: 40px;

            .dots {
                width: 23px;
                height: 5px;
                margin-right: 15px;
            }
        }
    }
    .author{
        padding: 10px 15px;
        display: flex;
        align-items: center;

        .left{
            width: 100%;
            display: flex;
            align-items: center;
            
            .img{
                width: 35px;
                height: 35px;
                position: relative;
                margin-right: 15px;
                .authorImg{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
                .star{
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    bottom: 0;
                    right: -3px;
                }
            }
            .nickname{
                .name{
                    font-size: 14px;
                    font-weight: bold;
                    margin: 5px 0;
                }
                .time{
                    font-size: 12px;
                    color: #666;
                    font-weight: bold;
                }
            }
        }
        .right{
            flex: 0 0 80px;
            height: 100%;
            line-height: 80px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            
            .gz{
                height: 20px;
                padding: 3px 10px;
                background-color: #fef3ee;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                color: #fb7d4e;
                font-weight: bold;
                font-size: 13px;

                &>img{
                    width: 12px;
                    height: 12px;
                    display: block;
                }
            }
            .active{
                color: #999;
                background-color: #f2f2f2;
            }
        }

    }
    .mainImg{
        padding: 5px 13px 10px 13px;

        &>img{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .mainImgs{
        background-color: #f2f2f2;
        padding: 13px;
        padding-bottom: 0;
        &>img{
            width: 105px;
            height: 95px;
            display: inline-block;
            margin-right: 15px;
            margin-bottom: 13px;
        }
        &>img:nth-child(3n){
            margin-right: 0;
        }
    }
    .talkInfo{
        margin: 10px 15px 20px 15px;
        padding: 10px;
        background-color: #f2f2f2;
        display: flex;
        
        .infoImg{
            flex: 0 0 60px;
            height: 55px;
            margin-right: 10px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .rightInfo{
            width: 255px;

            .talkname{
                font-size: 15px;
                font-weight: bold;
                letter-spacing: 0.5px;
                margin: 5px 0;
            }
            .talkdescrip{
                font-size: 12px;
                line-height: 15px;
                color: #666;
                font-weight: bold;
                letter-spacing: 0.5px;
            }

        }
    }
    .text{
        margin: 10px 15px 20px 15px;
        padding: 10px 0;
        font-weight: bold;
        font-size: 15px;
        line-height: 22px;
    }
    .likeCon{
        // width: 100%;
        box-sizing: border-box;
        padding: 10px 0px 25px 0px;
        margin: 0 15px;
        border-bottom: 1px solid #ccc;

        .likelist{
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .imgItem{
                width: 30px;
                height: 30px;
                display: block;
                margin-right: 8px;
                margin-bottom: 8px;

                &>img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            // .imgItem:first-child{
            //     margin-right: 10px;
            // }
            // .imgItem:last-child{
            //     margin-right: 10px;
            // }
            .likenum{
                display: inline-block;
                color: #999;
                font-size: 13px;
                letter-spacing: 0.5px;
                margin-bottom: 8px;
            }
        }
    }
    .empty{
        padding: 0;
    }
    .commentCon{
        padding: 15px;
        
        .commentItem{
            padding: 10px 0;
            display: flex;

            .Comleft{
                flex:0 0 35px;
                height: 35px;
                margin-right: 10px;
                position: relative;

                &>img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
                .star{
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    bottom: 0;
                    right: -3px;
                }
            }
            .Comright{
                flex: 1;
                .RightTop{
                    width: 100%;

                    .toptime{
                        font-size: 12px;
                        margin-top: 2px;
                        margin-bottom: 8px;
                        opacity: 0.6;
                    }
                    .topname{
                        font-size: 14px;
                        // font-weight: bold;
                        letter-spacing: 0.8px;
                        color: #fed74c;
                    }
                }
                .RightCenter{
                    padding: 15px 0;

                    .content{
                        font-size: 14px;
                        font-weight: bold;
                        line-height: 22px;
                        letter-spacing: 0.8px;
                    }
                }
                .RightBottom{
                    display: flex;
                    justify-content: space-between;

                    .btmleft{
                        font-size: 12px;
                        color: #999;
                    }
                    .btmright{
                        display: flex;
                        align-items: center;
                        .replayIcon{
                            width: 16px;
                            height: 16px;
                            margin-right: 20px;

                            &>img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .likeIcon{                  
                            display: flex;
                            align-items: center;

                            &>img{
                                width: 14px;
                                height: 14px;
                                margin-right: 8px;
                            }
                            &>span{
                                font-weight: bold;
                                font-size: 14px;
                                color: #999;
                            }
                            .likeImg{
                                width: 14px;
                                height: 14px;
                                margin-right: 8px;
                                background-image: url(../assets/images/topbanner_white_zan_yes.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 150%;
                            }
                        }
                    }
                }
            }
        }
    }
    .commentEmpty{
        padding-top: 10px;
        text-align: center;
        font-size: 13px;
        color: #666;
        letter-spacing: 0.5px;
    }
    .bottom{
        height: 40px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        display: flex;
        align-items: center;

        .leftlike,
        .rightCom{
            flex: 0 0 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            &>img{
                width: 18px;
                height: 18px;
                display: block;
                margin-right: 10px;
            }
            &>span{
                font-size: 14px;
                font-weight: bold;
            }
            .already{
                color: #fb7d4e;
            }
        }
        .centerline{
            flex:0 0 1px;
            height: 15px;
            background-color: #ccc;
        }
    }
}
</style>